<template>
  <div>
    <div>
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="类型名称" name="type_title">
              <a-input v-model:value="form.type_title" placeholder="请输入类型名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序" name="other">
              <a-input v-model:value="form.sort" placeholder="请输入排序" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="说明" name="other">
              <a-input v-model:value="form.explain" placeholder="请输入说明" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="图片封面" name="other">
              <div v-if="image" style="display: flex; flex-wrap: nowrap"
                ><div style="width: 80px; height: 80px; padding: 5px" @click="select_img()">
                  <img :src="image" style="width: 100%; height: 100%; object-fit: contain"
                /></div>
              </div>
              <a-button v-else class="ant-upload-text" @click="select_img()">上传图片 </a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="推荐位">
              <a-space direction="vertical" name="other">
                <a-switch
                  v-model:checked="form.recommend"
                  checked-children="推荐"
                  un-checked-children="不推荐"
                />
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态" name="other">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.status"
                  checked-children="正常"
                  un-checked-children="禁用"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div style="position: relative; bottom: 10px">
        <a-button type="primary" @click="submit">{{ select_title }}</a-button>
      </div></div
    >
    <a-drawer
      title="文件管理"
      width="90%"
      :open="open_image"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose1"
      ><fileIndex @upload="upload_file"
    /></a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onBeforeUpdate, onBeforeMount } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';
  import fileIndex from '/@/views/locality/fileManagement/fileIndex.vue';

  {
    fileIndex;
  }
  // import { message } from 'ant-design-vue';
  const open_image: any = ref(false);
  const onClose1 = () => {
    open_image.value = false;
  };
  const select_uploading: any = ref();
  function select_img() {
    open_image.value = true;
    select_uploading.value = 'type_image';
  }
  const image: any = ref('');
  function upload_file(type, item) {
    if (type == 'image') {
      if (select_uploading.value == 'type_image') {
        image.value = item[0].url;
        form.value.type_cover = item[0].url;
      }
      open_image.value = false;
      console.log(form.value);
    }
  }
  const form: any = ref({
    type_title: '',
    type_image: '',
    type_cover: '',
    sort: '',
    explain: '',
    recommend: false,
    status: true,
  });

  let $emit = defineEmits(['onReturn']);

  let props = defineProps(['select_type', 'select_title', 'select_data']);

  {
    Tinymce;
  }

  function submit() {
    form.value.status = form.value.status ? 'normal' : 'destroy';
    form.value.recommend = form.value.recommend ? '1' : '0';
    if (props.select_title == '新增') $emit('onReturn', form.value, '新增');
    else $emit('onReturn', form.value, '编辑');
    // message.success('商品已提交,可以添加数据了');
  }

  const options2: any = ref([]);

  const rules: any = {
    type_title: [{ required: true, message: '请输入商品名称' }],
    other: [{ required: false, message: '请输入排序位置' }],
  };
  // onBeforeMount(() => {
  //   if (props.select_title == '编辑') {
  //     form.value = props.select_data;
  //   } else {
  //     form.value = {
  //       type_title: '',
  //       type_image: '',
  //       type_cover: '',
  //       image: '',
  //       sort: '',
  //       explain: '',
  //       recommend: false,
  //       status: true,
  //     };
  //   }
  //   options2.value = props.select_type;
  // });
  // onBeforeUpdate(() => {
  //   // 检查是否保存过规格

  //   if (props.select_title == '编辑') {
  //     form.value = props.select_data;
  //   } else {
  //     form.value = {
  //       type_title: '',
  //       type_image: '',
  //       type_cover: '',
  //       image: '',
  //       sort: '',
  //       explain: '',
  //       recommend: false,
  //       status: true,
  //     };
  //   }
  //   options2.value = props.select_type;
  // });
</script>
<style scoped>
  .skuName {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #f1f1f1;
  }

  .skuValue {
    display: flex;
    align-items: center;

    /* justify-content: space-between; */
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #fcfbfb;
  }

  .dynamic-delete-button {
    position: relative;
    top: 4px;
    transition: all 0.3s;
    color: #999;
    font-size: 24px;
    cursor: pointer;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .skuValue_1 {
    /* padding: 5px 15px;
    background-color: rgb(245 245 245 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%); */

    color: white;
  }

  @keyframes fadenum {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .skuName_1 {
    color: #f1f1f1;
  }

  .skuName:hover {
    .skuName_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
    }
  }

  .skuValue:hover {
    .skuValue_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
      font-weight: 700;
    }
  }
</style>
